<%@ page contentType="text/html" %>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%@ include file="header.jsp" %>
<!--[if IE]><script language="javascript" type="text/javascript" src="../../js/flot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../../js/flot/jquery.flot.js"></script>

<div>
	<h3>Results for the room "<c:out value="${room.id}"/>"</h3>
	<p><strong>Category :</strong> <c:out value="${room.category.name}"/> </p>
</div>
<br/>

	<p class="PlotTitle">Minority</p>
    <div id="placeholder2" style="width:700px;height:150px"></div>
	<div class="downloadCSV">
			<a href="../csv/getRoomHistory?id=<c:out value="${room.id}"/>">
				Download the room history<img src="../../resources/csv.png" title="Download csv file"/>
			</a>
	</div>
	<div>
	<br/>
	<p> List of users </p>
	<table class="dataTable">
			<tr>
				<th> Position			</th>
				<th> User				</th>
				<th> Final Score		</th>
				<th> Human/Robot		</th>
				<th> View History 		</th>
			</tr>	 
			<% int i=1;%>
			<c:forEach items="${subscriptions}" var="s" varStatus="loopStatus">
			<tr class="${loopStatus.index %2 == 0 ? 'even' :  'odd'}">
				<td> <%= i++ %>
				<td class="left"> <c:out value="${s.user.name}"/> </td>
				<td> <c:out value="${s.score}"/> </td>
				<td> <c:out value="${s.user.humanity}"/> </td>
				<td class="center"> 
					<a href="#"><img src="../../resources/details.png" title="Details"/></a> 
					<a href="../csv/getSubscriptionHistory?id=<c:out value="${s.id}"/>">
						<img src="../../resources/csv.png" title="Download csv file"/>
					</a>
				</td>
			</tr>
			</c:forEach>
	</table>
	</div>


<script id="source" language="javascript" type="text/javascript">
$(function () {
    var minority = [<c:out value="${summaries}"/>];
    var options2 = {
    	series: {
	   		lines: { show: true },
	       	points: {show: true, fill: true, fillColor: "rgb(0, 255, 255)", radius: 4 }
	    },	
       	colors: ["#369"],
    	yaxis: {ticks: [[-1, "<c:out value="${question.answerB}"/>"], [0, ""], [1, "<c:out value="${question.answerA}"/>"]]},
    	xaxis: {max: 50, tickSize: 5, tickDecimals: 0},
    };

    $.plot($("#placeholder2"), [{data: minority}], options2);
});
</script>

<%@ include file="footer.jsp" %>

